<template>
  <el-drawer
    :title="translate('refundPrice')"
    :visible.sync="isShow"
    :before-close="closeDrawer"
    size="60%"
  >
    <div class="property-title">{{ translate("cmoboInfo") }}</div>
    <div class="df">
      <div class="flex1 df">
        <span class="key">{{ translate("comboNum") }}：</span>
        <span v-if="param.id" class="value">{{ param.id }}</span>
      </div>
      <div class="flex1 df">
        <span class="key">{{ translate("tcname") }}：</span>
        <span class="value">{{ param.mealsName }}</span>
      </div>
      <div class="flex1 df">
        <span class="key">{{ translate("cmoboType") }}：</span>
        <span v-if="param.mealsType === '0'" class="value">{{
          translate("mpcsk")
        }}</span>
        <span v-if="param.mealsType === '1'" class="value">{{
          translate("mpqxk")
        }}</span>
        <span v-if="param.mealsType === '2'" class="value">{{
          translate("ydck")
        }}</span>
      </div>
    </div>
    <div class="mt20 df">
      <div class="flex1 df">
        <span class="key">{{ translate("payPrice") }}：</span>
        <span class="value">{{ param.realPrice }}</span>
      </div>
      <div class="flex1 df">
        <span class="key">{{ translate("comboTotalNum") }}：</span>
        <span class="value">{{ param.numCount }}</span>
      </div>
      <div class="flex1 df">
        <span class="key">{{ translate("useNum") }}：</span>
        <span class="value">{{ param.useCount }}</span>
      </div>
    </div>
    <div class="df mt20">
      <div class="flex1 df">
        <span class="key">{{ translate("residueNum") }}：</span>
        <span v-if="param.remainCount" class="value">{{
          param.remainCount
        }}</span>
      </div>
      <div class="flex1 df">
        <span class="key">{{ translate("residueGiveNum") }}：</span>
        <span class="value">{{ param.remainGiveNum }}</span>
      </div>
      <div class="flex1 df">
        <span class="key">{{ translate("payMethod") }}：</span>
        <span class="value">{{ param.payMethod || "" }}</span>
      </div>
    </div>
    <div class="mt20 df">
      <div class="flex1 df">
        <span class="key">{{ translate("validDate") }}：</span>
        <span class="value">{{ param.validTime }}</span>
      </div>
      <div class="flex1 df" />
      <div class="flex1 df" />
    </div>
    <div class="property-title mt20">{{ translate("memberInfo") }}：</div>
    <div class="df">
      <div class="flex1 df">
        <span class="key">{{ translate("name") }}：</span>
        <span v-if="param.memberName" class="value">{{
          param.memberName
        }}</span>
      </div>
      <div class="flex1 df">
        <span class="key">{{ translate("phone") }}：</span>
        <span class="value">{{ param.phone }}</span>
      </div>
      <div class="flex1 df">
        <span class="key">{{ translate("memberIdCard") }}：</span>
        <span class="value">{{ param.memberCard }}</span>
      </div>
    </div>
    <div class="property-title mt20">{{ translate("refundPince") }}：</div>
    <div class="df_ac">
      <el-input
        v-model="handlePrice"
        :disabled="!isChangePrice"
        onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"
        type="text"
        class="w200 mr20"
      />
      <el-checkbox v-model="isChangePrice" class="mr20">{{
        translate("changeMoney")
      }}</el-checkbox>
      <span class="ml20 placeholder9">{{ translate("refundPriceDesc") }}</span>
    </div>
    <div class="property-title mt20">{{ translate("bz") }}：</div>
    <div>
      <el-input v-model="handleRemake" />
    </div>
    <div class="mt30">
      <el-button :loading="subLoading" type="primary" @click="handleRefund">{{
        translate("enter")
      }}</el-button>
      <el-button @click="closeDrawer">{{ translate("cancel") }}</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { comboRefund, comboRefundPrice } from '@/api'
export default {
  data() {
    return {
      isShow: false,
      subLoading: false,
      param: {},
      handleRemake: '',
      handlePrice: '',
      isChangePrice: false
    }
  },
  created() { },
  methods: {
    closeDrawer() {
      this.isShow = false
      this.$emit('close')
    },
    getPrice(row) {
      const param = {
        id: row.id
      }
      comboRefundPrice({ param }).then(res => {
        this.param = { ...row, price: res.record.price }
        this.handlePrice = res.record.price
      })
    },
    handleRefund(id) {
      const { param, handlePrice, handleRemake, isChangePrice } = this
      if (!handlePrice && handlePrice !== '0' && handlePrice !== 0) {
        return this.$message.warning(this.translate('refundPricePlace'))
      }
      const filter = {
        id: param.id,
        handlePrice: handlePrice * 1,
        shouldRefundPrice: param.price,
        handleRemake,
        isChange: isChangePrice ? '1' : '0'
      }
      this.subLoading = true
      comboRefund({ param: filter }).then(res => {
        this.subLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('useStatus8'))
        this.isShow = false
        this.$emit('success')
      }, () => {
        this.subLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main-container {
  background-color: #fff;
}
.key {
  color: #222222;
  display: inline-block;
  // width: 100px;
  // text-align: right;
}
.value {
  flex: 1;
  color: #666666;
}
.file {
  width: 84px;
  height: 84px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
}
.discount_wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .key {
    width: 90px;
  }
  .discount {
    width: 33.33%;
    margin-bottom: 20px;
  }
}
</style>
